<template>
  <div class="app-container">

    <div class="custom_card_0">
      <el-form inline :model="queryParams" size="mini" ref="queryForm" label-width="110px" label-position="right">


        <el-form-item label="已读状态" prop="readStatus">
          <el-select v-model="queryParams.readStatus" clearable>
            <el-option label="已读" :value="1"></el-option>
            <el-option label="未读" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="处理状态" prop="processingStatus">
          <el-select v-model="queryParams.processingStatus" clearable>
            <el-option label="未处理" :value="1"></el-option>
            <el-option label="已处理" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="车牌号" prop="carNo">
          <el-input v-model="queryParams.carNo" clearable placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="客户信息" prop="customerInfo">
          <el-input v-model="queryParams.customerInfo" clearable placeholder="请输入客人姓名或联系电话"></el-input>
        </el-form-item>

        <el-form-item label="告警类型" prop="alarmType">
          <el-select v-model="queryParams.alarmType" clearable>
            <el-option v-for="dict in dict.type.gps_alarm_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="告警时间" prop="startTime">
          <el-date-picker clearable size="small" v-model="time" type="daterange" range-separator="至"
                          value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="custom_card_0" style="padding-bottom: 20px">

      <el-row :gutter="10" class="mb10">
        <el-col :span="1.5">
          <el-button  class="first-plain-btn" size="medium" @click="goReads">标为已读
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button  class="sec-plain-btn" size="medium" @click="goHandles">处理
          </el-button>
        </el-col>
      </el-row>

      <el-table :data="warnList" border  @selection-change="handleSelectionChange"
                :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column width="60px" align="center" label="序号" prop="name">
          <template v-slot="scope">
            <span>{{(scope.$index+1)+(queryParams.pageNum-1)*queryParams.pageSize}}</span>
          </template>
        </el-table-column>
        <el-table-column width="100px" align="center" label="车牌号" prop="carNo"></el-table-column>
        <el-table-column align="center" label="IMEI" prop="imei"></el-table-column>
        <el-table-column align="center" label="设备类型" prop="equipmentType">
          <template v-slot="scope">
            <span>{{1==scope.row.equipmentType?'有线':2==scope.row.equipmentType?'无线':''}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="SIM卡号" prop="simCard"></el-table-column>
        <el-table-column align="center" label="告警类型" prop="alarmName">
          <template v-slot="scope">
            <div style="color: #0d65eb;cursor:pointer;" @click="showInfo(scope.row)">{{ scope.row.alarmName }}</div>
          </template>

        </el-table-column>
        <el-table-column align="center" label="告警时间" prop="alarmTime" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="告警地址" prop="address" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="关联用车中订单" prop="orderNo" show-overflow-tooltip>
          <template v-slot="scope">
            <div style="color: #0d65eb;cursor:pointer;" @click="goOrder(scope.row.orderNo)">{{ scope.row.orderNo }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="关联客户" prop="customerInfo"></el-table-column>
        <el-table-column width="80px" align="center" label="处理状态" prop="processingStatus">
          <template v-slot="scope">
            <span>{{1==scope.row.processingStatus?'未处理':2==scope.row.processingStatus?'已处理':''}}</span>
          </template>
        </el-table-column>
        <el-table-column width="80px" align="center" label="已读状态" prop="readStatus">
          <template v-slot="scope">
            <span>{{1==scope.row.readStatus?'已读':2==scope.row.readStatus?'未读':''}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" prop="isActive">
          <template v-slot="scope">
            <div style="display: flex;justify-content: center">
              <span v-if="2==scope.row.readStatus" style="color: #0d65eb;cursor:pointer;" @click="showRead(scope.row.id)">标记已读</span>
              <span v-if="1==scope.row.processingStatus" style="color: #0d65eb;cursor:pointer;margin-left: 10px" @click="showHandle(scope.row.id)">处理</span>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
    </div>

    <el-dialog title="设置标签" width="500px" append-to-body destroy-on-close :visible.sync="showHandleWarn">
      <HandleWarnDialog v-if="showHandleWarn"
                        @success="commit"
                        @cancel="showHandleWarn = false"></HandleWarnDialog>
    </el-dialog>

    <el-dialog title="告警预览" width="800px" append-to-body destroy-on-close :visible.sync="showWarnInfo">
      <WarnDialog :map-data="selItem" v-if="showWarnInfo" @cancel="showWarnInfo = false"></WarnDialog>
    </el-dialog>

  </div>
</template>

<script>
import WarnDialog from '@/components/ScrollNotice/WarnDialog'
import HandleWarnDialog from "@/components/ScrollNotice/HandleWarnDialog";
import {alarmhandle, alarmlist, markAsRead} from "@/api";

export default {
  name:'Warn',
  components:{
    WarnDialog,
    HandleWarnDialog
  },
  dicts:['gps_alarm_type'],
  data() {
    return {
      showWarnInfo: false,
      showHandleWarn: false,
      time: '',
      warnList: [],
      total: 0,
      queryParams:{
        alarmStartTime:null,
        alarmEndTime:null,
        readStatus:null,
        processingStatus:null,
        carNo:null,
        customerInfo:null,
        alarmType:null,
        pageSize: 10,
        pageNum: 1,
      },
      selItem:{},
      selId:'',
      selectedProject: [], // 选中项目
    }
  },
  mounted() {
    this.getList()
  },
  activated() {
    this.getList()
  },
  methods: {

    goReads(){
      if(this.selectedProject.length<=0){
        this.$message.warning('请选择要处理的告警信息')
        return
      }

      const ids = this.selectedProject.map(item=>{
        return item.id
      }).join(',')

      this.showRead(ids)

    },
    goHandles(){
      if(this.selectedProject.length<=0){
        this.$message.warning('请选择要处理的告警信息')
        return
      }

      const ids = this.selectedProject.map(item=>{
        return item.id
      }).join(',')

      this.showHandle(ids)
    },

    handleSelectionChange(val) {
      this.selectedProject = val;
    },

    showInfo(item){
      this.selItem = item
      this.showWarnInfo = true
    },

    handleQuery() {
      if(this.time && this.time.length > 0){
        this.queryParams.alarmStartTime = this.time[0]
        this.queryParams.alarmEndTime = this.time[1]
      }
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.queryParams = {
        alarmStartTime:null,
        alarmEndTime:null,
        readStatus:null,
        processingStatus:null,
        carNo:null,
        customerInfo:null,
        alarmType:null,
        pageSize: 10,
        pageNum: 1,
      }
      this.time = [];
      this.resetForm('queryForm')
      this.handleQuery()
    },
    getList() {
      alarmlist(this.queryParams).then(result => {

        this.warnList = result.rows
        this.total = result.total

        this.$refs.audioTip.pause();
        if (result.data.carAlarmData.length > 0 && result.data.gpsAlarmSound) {
          this.resetRing()
        } else {
          this.stopRing()
        }

      }).catch(error => {
        this.stopRing()
      })
    },
    showHandle(ids){
      this.selId = ids
      this.showHandleWarn = true
    },
    showRead(ids){
      const _this = this

      this.$confirm('确定标记为已读？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          markAsRead({
            ids:ids
          }).then(res => {
            _this.$message.success("处理成功")
            _this.$IVue.$emit('refreshRing')
            _this.handleQuery()
          })

        })
        .catch(() => {
        })
    },
    commit(params){
      alarmhandle({
        ids: this.selId,
        ...params
      }).then(res => {
        this.showHandleWarn = false
        this.$message.success('处理成功')
        this.$IVue.$emit('refreshRing')
        this.handleQuery()
      }).catch(e => {
        this.showHandleWarn = false
      })
    },
    goOrder(orderNo) {
      this.$router.push({
        path: '/orderBasic/detail',
        query: {orderNo: orderNo}
      })
    },

  }
}
</script>

<style scoped>

</style>
